<template>
  <div class="common-page">
    <f-form :form-list="formList" :api="api" @getResponse="getResponse" :init-form="initForm" />
    <f-btns style="margin-top: 12px" :btns="btns" />
    <f-table style="margin-top: 12px" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const api = 'getMenus'
const formList = ref([
  {
    label: '名称',
    prop: 'name',
    name: 'name',
    bind: {
      tag: 'el-input',
      placeholder: '请输入名称',
      clearable: true
    },
    rules: [{ required: false, message: '名称不能为空' }]
  },
  {
    label: '编码',
    prop: 'code',
    name: 'code',
    bind: {
      tag: 'el-input',
      placeholder: '请输入编码',
      clearable: true
    }
  },
  {
    label: '角色',
    prop: 'role',
    name: 'role',
    bind: {
      tag: 'el-select-v2',
      placeholder: '请选择角色',
      clearable: true,
      filterable: true,
      options: [
        { label: '管理员', value: 'admin' },
        { label: '开发人员', value: 'develop' }
      ]
    }
  },
  {
    label: '链接',
    prop: 'href',
    name: 'href',
    bind: {
      tag: 'el-input',
      placeholder: '请输入链接',
      clearable: true
    }
  },
  {
    label: '缓存',
    prop: 'cache',
    name: 'cache',
    bind: {
      tag: 'el-select-v2',
      placeholder: '请选择是否有缓存',
      clearable: true,
      filterable: true,
      options: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ]
    }
  }
])
const getResponse = (response) => {
  // 这里可以拿到每一次查询接口的结果
  console.log(response)
}
const initForm = ref({})

const btns = ref([
  {
    code: 'add',
    text: '新增',
    bind: {
      type: 'primary'
    },
    on: (item) => {
      console.log(item)
    },
    hide: false
  },
  {
    code: 'mul-remove',
    text: '批量删除',
    bind: {
      type: 'danger'
    },
    on: (item) => {
      console.log(item)
    },
    hide: () => false
  }
])
</script>

<style scoped>
.common-page {
  background-color: transparent;
}
</style>
